<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>店铺信息</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link rel="stylesheet" href="/static/css/weui.css"/>
        <link rel="stylesheet" href="/static/css/weuix.css"/>
        <link rel="stylesheet" href="/static/layui/css/layui.css">

        <script src="/static/layui/layui.js"></script>
        <script src="/static/js/zepto.min.js"></script>
        <script src="/static/js/zepto.weui.js"></script>
        <script src="/static/js/baseJs/base.js"></script>
        <script src="/static/js/jquery-2.1.4.js"></script>
        <script src="/static/js/jquery.fly.min.js"></script>
        <script>

        </script>
        <style>/*商品分类页*/
        .padding-all {
            padding: 10px
        }

        .w-3 {
            width: 33.33%;
            float: left;
            padding: .6rem .4rem;
            box-sizing: border-box;
            position: relative;
        }

        .w-5 {
            width: 33.33%;
            float: left;
            padding: .10rem .10rem;
            box-sizing: border-box;
            position: relative;
        }

        .category-top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 1;
            background: #F6F6F9
        }

        .menu-left, .menu-right {
            position: fixed;
            left: 0;
            top: 44px;
            bottom: 0;
            overflow-y: scroll;
        }

        .menu-right #loading {
            left: 11px;
            top: 44px;
        }

        .menu-left {
            background: #F6F6F9;
        }

        .menu-left ul li {
            box-sizing: border-box;
            font-size: 12px;
            color: #333;
            width: 76px;
            height: 42px;
            line-height: 42px;
            text-align: center;
        }

        .menu-left ul li.active {
            background: #fff;
            position: relative;
        }

        .menu-left ul li.active:before {
            content: " ";
            position: absolute;
            display: block;
            width: 2px;
            height: 100%;
            background: #e21323;
            top: 0;
            left: 0;
        }

        .menu-right {
            background: #fff;
            position: inherit;
            margin-left: 76px;
            margin-top: 44px;
            right: 0;
            bottom: 0;
        }

        .menu-right h5 {
            font-size: 12px;
            padding-top: 2px;
            color: #666;
            margin-top: 12px;
            margin-bottom: 4px;
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 8px;
        }

        .menu-right h5:first-child {
            margin-top: 0;
        }

        .menu-right ul {
            overflow: hidden;
        }

        .menu-right ul li {
            text-align: center;
            list-style: none;
        }

        .menu-right ul li a {
            display: block;
            position: absolute;
            left: 3px;
            top: 7px;
            bottom: 7px;
            right: 3px;
        }

        .menu-right ul li:nth-child(3n+1) a {
            left: 0;
            right: 7px;
        }

        .menu-right ul li:nth-child(3n) a {
            right: 0;
            left: 7px;
        }

        .menu-right ul li span {
            display: block;
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            text-align: center;
            font-size: 10px;
            color: #888;
        }

        .menu-right ul li img {
            width: 50px;
            height: 50px;
        }

        .mune-no-img img {
            display: none
        }

        .mune-no-img span {
            border: 1px solid #efefef;
            color: #555;
            border-radius: 4px;
        }

        /*字体 标题*/
        .body {
            font-family: "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu
        }

        /*抛物*/
        .circle {
            width: 50px;
            height: 50px;
            position: absolute;
            background: #ffb927;
            border-radius: 50%;
            top: 25%;
        }

        /*按钮背景*/
        .weui-count .weui-count__increase {
            background-color: #ffb927;
        }

        .weui-count .weui-count__btn {
            border: 1px solid #ffb927;
        }

        .weui-count .weui-count__btn:after, .weui-count .weui-count__btn:before {
        }

        .end {

        }
        </style>
    </head>

    <body ontouchstart class="body">
        <div class="wy-content">
            <div class="category-top">
                <header class='weui-header'>
                    <!--搜索-->
                    <!--   <form class="weui-search-bar__form">
                           <div class="weui-search-bar__box">
                               <i class="weui-icon-search"></i>
                               <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required>
                               <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                           </div>
                           <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                               <i class="weui-icon-search"></i>
                               <span>搜索您想要的商品</span>
                           </label>
                       </form>
                        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
-->

                    <div style="padding: 5px 0">

                        <div class="layui-panel" style="border-radius: 10px;">
                            <div class="weui-flex">
                                <a href="/index/home" class="icon icon-109 f-orange weui-flex__item"
                                   style="color: #000;line-height: 60px;">返回</a>
                                <div class="weui-flex__item">
                                    <img id="shopLogo" style="border-radius: 100px;width: 64px;height: 64px;" width="64"
                                         height="64"
                                         src="/static/images/ToolIoc/星速外卖logo.png">
                                </div>

                                <span style="font-size: 14px;font-weight: 900;line-height: 60px;padding-right: 5px"
                                      id="shopName">店铺名称</span>
                            </div>
                        </div>
                    </div>
                </header>
            </div>

            <!--根据布局顺序调整的-->
            <!--左边导航栏-->
            <aside>
                <div style="padding-top: 40px" class="menu-left scrollbar-none" id="sidebar">
                    <!--菜品-->
                    <ul id="shopMenu">

                    </ul>
                </div>
            </aside>
            <div id="shopInfo">
                <section style="padding-top: 50px" class="menu-right padding-all j-content">
                    <!--按菜品类型对应的美食-->
                    <ul>
                        <li style="text-align: left;">
                            <div class=" layui-panel" style="border-radius: 10px;height: 90px">
                                <!--食品图片-->
                                <img style="padding: 5px 5px;border-radius: 10px;width: 68px;height: 60px;margin-bottom: 80px"
                                     src="/static/images/ToolIoc/146664.jpg"/>


                                <!--文案-->
                                <div style="display: inline-block">

                                    <span id="menuName"
                                          style="font-size: 14px;font-weight: 900;color: #313030;padding:5px 0 0px 0">

                                    </span>
                                    <span id="discount">
                                        <button class="layui-btn layui-btn-warm layui-btn-xs"
                                                style="border-radius: 10px">6.6折 限购5份</button>
                                    </span>
                                    <span style="color: #ff0000;font-size: 14px">
                                        ￥12.0
                                    </span>
                                </div>
                                <!--购买-->
                                <div class="weui-count " style="padding:55px 5px 0 0;display:inline-block;float: right">
                                    <a class="weui-count__btn weui-count__decrease " style="top:0;"></a>
                                    <input name="count" class="weui-count__number " type="number" value="0"/>
                                    <a class="weui-count__btn weui-count__increase circle"
                                       style="top:0;float:bottom"></a>
                                    <input name="smId" style="display: none">
                                </div>
                            </div>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
        <!--底部-->
        <div class="weui-footer weui-footer_fixed-bottom">
            <div class=" layui-panel weui-flex" style="border-radius: 100px;z-index: 1">
                <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                    <!--logo图-->
                    <img style=";padding-left: 20px;" src="/static/images/ToolIoc/星速外卖.png">
                    <!--background-color: #FA5151; 角标-->
                    <span class="weui-badge end"
                          style="position: absolute;top: -.4em;right: -.4em;background-color: #898484;">0</span>
                </div>
                <div class="weui-cell__ft " style="line-height: 60px">
                    <span style="color: #ffb927;font-size: 15px;font-weight: 800;">￥<span style="font-size: 18px"
                                                                                          id="moneyCount"> 0</span> </span>
                </div>

                <!--去结算-->
                <div class="weui-flex__item" style="float: right;text-align:right;;z-index: 0">
                    <form action="/order/shopOrder" method="post" id="shopOrder">
                        <!--token-->
                        <input name="token" style="display: none;">
                        <!-- smId:orderShop,
                        shopId:shoId,
                        smPrice:money-->
                        <!--订单编号-->
                        <input name="smId" style="display: none;">
                        <!--店铺ID-->
                        <input name="shopId" style="display: none;">
                        <!--总价-->
                        <input name="smPrice" style="display: none;">
                        <!--登录编号logId-->
                        <!--<input name="logId" style="display: none;">-->
                        <button name="subContent" type="button"
                                style="width: 80px;height: 64px;border-radius:0 100px 100px 0;background-color: #898484"
                                class="layui-btn" disabled="disabled">
                            去结算
                        </button>
                    </form>
                </div>
            </div>

        </div>
        <script>
            //获取路径
            var url = window.location.href;
            //获取 / 最后出现的位置
            var lastIndexOf = url.lastIndexOf("/");
            //截取 获取店铺信息Id
            var shoId = url.substring(lastIndexOf + 1);
            //获取当前店铺信息
            ajaxBase('/shop/findShopById', 'get', {shopId: shoId}, 'json', function (res) {
                if (res.code == 200) {
                    //店铺图标更改
                    if (res.data.shop.shopImageUrl != null) {
                        $('#shopLogo').prop('src', res.data.shop.shopImageUrl);
                    }
                    /*店铺名称*/
                    if (res.data.shop.shopName != null) {
                        $('#shopName').html(res.data.shop.shopName)
                    }
                    /*商品描述*/
                    $('#menuName').html(res.data.shop.shopMenu[0].menu.menuName)

                    /*店铺ID*/

                    //初始化菜品类别
                    var menu = new Set();
                    var MenuText = '';


                    //初始化类型品类
                    //第一步 去重
                    for (i in res.data.shop.shopMenu) {
                        menu.add(res.data.shop.shopMenu[i].menu.menuType.menuTypeName);
                    }
                    //第二步 去重之后 进行添加到左边导航栏
                    var content = 0;
                    for (var i of menu) {
                        if (content == 0) {
                            MenuText += '<li class="active" onclick="clickLi(this)">' + i + '</li>';
                        } else {
                            MenuText += '<li onclick="clickLi(this)">' + i + '</li>';
                        }
                        content++;
                    }
                    console.log(menu);
                    /*进行添加*/
                    $('#shopMenu').html(MenuText);


                    //初始化食品
                    var shopMenuText = '';
                    //根据菜品类型 遍历 赋值
                    for (var i of menu) {
                        shopMenuText += '<section style="padding-top: 50px" class="menu-right padding-all j-content"><ul>';
                        /*循环 确定店铺类型对应的食品的归宿*/
                        for (j in res.data.shop.shopMenu) {
                            /*相等证明 菜品类型和菜品 归宿于同一个*/
                            if (res.data.shop.shopMenu[j].menu.menuType.menuTypeName === i) {
                                shopMenuText +=
                                    '<li style="text-align: left;margin: 5px 0">' +
                                    '     <div class=" layui-panel" style="border-radius: 10px;height: 90px">' +
                                    '         <!--食品图片-->' +
                                    '         <img style="padding: 5px 5px;border-radius: 10px;width: 68px;height: 60px;margin-bottom: 80px"' +
                                    '              src=' + res.data.shop.shopMenu[j].smImgUrl + ' />' +
                                    /*食品名称 和 折扣*/
                                    '       <div style="display: inline-block">' +
                                    /*食品名称*/
                                    '             <span  style="font-size: 14px;font-weight: 900;color: #313030;padding:5px 0 0px 0">' + res.data.shop.shopMenu[j].menu.menuName + '</span>' +
                                    '             <span id="discount">' +
                                    /*折扣*/
                                    '                 <button class="layui-btn layui-btn-warm layui-btn-xs" style="border-radius: 10px">' + res.data.shop.shopMenu[j].smDiscount + '折</button>' +
                                    '             </span>' +
                                    /*价格*/
                                    '             <span style="color: #ff0000;font-size: 14px">￥' + res.data.shop.shopMenu[j].smPrice + '</span>' +
                                    '         </div>' +
                                    '         <!--购买-->' +
                                    '         <div class="weui-count " style="padding:55px 5px 0 0;display:inline-block;float: right">' +
                                    '             <a class="weui-count__btn weui-count__decrease " onclick="decrease(this)"  style="top:0;"></a>' +
                                    '             <input name="count" class="weui-count__number " type="number" value="0" readonly="readonly"/>' +
                                    '             <a class="weui-count__btn weui-count__increase circle" onclick="increase(this,event)"' +
                                    '                style="top:0;float:bottom"></a>' +
                                    '             <input name="smId" style="display: none" value=' + res.data.shop.shopMenu[j].smId + '>' +
                                    '         </div>' +
                                    '     </div>' +
                                    ' </li>'
                            }
                        }
                        shopMenuText += ' </ul></section>';
                    }
                    //拼接完成 添加食品
                    $('#shopInfo').html(shopMenuText);

                    //判断是否登录了
                    var logId;
                    try {
                        logId = JSON.parse(localStorage.getItem('userLogin')).logId;
                    }catch (e) {//没登陆
                        var subContent = $('button[name="subContent"]')
                        subContent.addClass('layui-btn-danger');
                        subContent.css('background-color', '');
                        subContent.attr('disabled', false);
                        subContent.html("登录");
                    }
                } else {
                    $.toast("出错!请联系管理员", "forbidden");
                }
            });


            //接收多值 不用
            function manyValues() {
                var url = window.location.search;
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    var key = new Array(strs.length);
                    var value = new Array(strs.length);
                    for (i = 0; i < strs.length; i++) {
                        key[i] = strs[i].split("=")[0]
                        value[i] = unescape(strs[i].split("=")[1]);
                        alert(key[i] + "=" + value[i]);
                    }
                }
            }

            /*页面 左边导航栏 点击触发*/
            function clickLi(obj) {
                $(obj).addClass('active').siblings('li').removeClass('active');
                var index = $(obj).index();
                $('.j-content').eq(index).show().siblings('.j-content').hide();

            }

            /*计时器*/
            //总数量
            var money = 0;
            //角标数量
            var countmark;
            var MAX = 10, MIN = 0;

            //减
            function decrease(obj) {
                //修改角标
                var $input = $(obj).parent().find('.weui-count__number');
                var number = parseInt($input.val() || "0") - 1
                if (number < MIN) {
                    number = MIN
                } else {
                    //获取角标 减去
                    countmark = parseInt($('.end').html());
                    countmark -= 1;
                    if (countmark == 0) {
                        //角标颜色 更改
                        $('.end').css('background-color', '#898484');
                        //去结算颜色更改
                        var subContent = $('button[name="subContent"]')
                        subContent.css('background-color', '#898484')
                        subContent.attr('disabled', true);
                    }
                    $('.end').html(countmark);
                    $input.val(number);
                    var price = $(obj).parent().parent().find('span')[2].innerText;
                    price = price.substr(1, price.length);
                    money -= parseFloat(price);
                    $('#moneyCount').html(money);
                    // console.log("减掉后总价:"+money);
                }
            }

            var offset = $('.end').offset();

            //加
            function increase(obj, event) {
                var $input = $(obj).parent().find('.weui-count__number');
                var number = parseInt($input.val() || "0") + 1
                if (number > MAX) number = MAX;
                $input.val(number)
                //抛物
                var parent;
                var thisItem = $(obj);
                var flyer = thisItem.clone();
                flyer.fly({
                    start: {
                        left: event.pageX,
                        top: event.pageY
                    },
                    end: {
                        left: offset.left + 10,
                        top: offset.top + 10,
                        width: 0,
                        height: 0
                    },
                    onEnd: function () {
                        var count;
                        /*回调*/
                        $('.end').css({
                            background: 'red'
                        });
                        parent = thisItem.parent();
                        //获取价格
                        var price = parent.parent().find('span')[2].innerText;
                        price = price.substr(1, price.length);
                        money += parseFloat(price);
                        //角标数量
                        countmark = parseInt($('.end').html());
                        countmark += 1;
                        // console.log("角标"+countmark)
                        //修改角标
                        $('.end').html(countmark);
                        //修改总价
                        $('#moneyCount').html(money);
                        // console.log("总价"+money)
                        //获取数量
                        count = parent.find('input').val();
                        //结算可点击
                        var subContent = $('button[name="subContent"]')
                        subContent.addClass('layui-btn-warm');
                        subContent.css('background-color', '');
                        subContent.attr('disabled', false);
                        setTimeout(function () {
                            $('.end').css({
                                background: '#ffb927'
                            });
                        }, 200);
                        this.destroy();
                    }
                });
            }

            $(function () {
                /*点击提交*/
                var orderShop = '';
                $('button[name="subContent"]').click(function () {
                    //遍历 食品
                    $('input[name="smId"]').parents().find('input').each(function (index) {
                        // console.log($(this).val())
                        if (index % 2 != 0) {//奇数 商品Id
                            orderShop += $(this).val() + "-";
                        }
                        if (index % 2 == 0) {//偶数 数量订单
                            orderShop += $(this).val();
                        }
                    });
                    //循环赋值
                    //数据
                    var datas = [localStorage.getItem('token'), orderShop, shoId, money];
                    $('#shopOrder').find('input').each(function (index) {
                        var $thisName = $(this).attr("name");
                        $('input[name=' + $thisName + ']').val(datas[index]);
                    });
                    var logId;
                    try {
                        logId = JSON.parse(localStorage.getItem('userLogin')).logId;
                    }catch (e) {
                        logId = -10;
                    }

                    //添加用户
                    $('#shopOrder').prop("action","/order/shopOrder/"+logId+"/"+get_uuid());
                    //修改进行提交
                    $(this).prop("type","submit");
                    /*
                    //异步 不用
                   ajaxBase('/shopOrder', 'post', {
                        token:localStorage.getItem('token'),
                        smId:orderShop,
                        shopId:shoId,
                        smPrice:money
                    }, 'json', function (res) {

                    })*/
                    console.log(orderShop);
                    console.log(money)
                })
            });

            // var MAX = 99, MIN = 0;
            // $('.weui-count__decrease').click(function (e) {
            //     var $input = $(e.currentTarget).parent().find('.weui-count__number');
            //     var number = parseInt($input.val() || "0") - 1
            //     if (number < MIN) number = MIN;
            //     $input.val(number)
            // })
            // $('.weui-count__increase').click(function (e) {
            //     var $input = $(e.currentTarget).parent().find('.weui-count__number');
            //     var number = parseInt($input.val() || "0") + 1
            //     if (number > MAX) number = MAX;
            //     $input.val(number)
            // })

            /* 抛物
            var offset = $('.end').offset();
             $('.circle').on('click',function (event) {
                 var parent;
                 var thisItem = $(this);
                 var flyer = thisItem.clone();
                 flyer.fly({
                     start: {
                         left: event.pageX,
                         top: event.pageY
                     },
                     end: {
                         left: offset.left + 10,
                         top: offset.top + 10,
                         width: 0,
                         height: 0
                     },
                     onEnd: function () {
                         var thisMoney = 0;
                         var count;
                         /!*回调*!/
                         $('.end').css({
                             background: 'red'
                         });
                         parent = thisItem.parent();
                         //获取价格.parent()
                         var price = parent.parent().find('span')[2].innerText;
                         price = price.substr(1, price.length);
                         console.log("价格" + price)
                         //获取数量
                         count = parent.find('input').val();
                         console.log("数量" + count)

                         //在总金额上加上
                         thisMoney = price * count;
                         //总金额
                         money += thisMoney;
                         console.log(thisMoney);
                         setTimeout(function () {
                             $('.end').css({
                                 background: 'blue'
                             });
                         }, 200);
                         this.destroy();
                     }
                 });
             })*/


        </script>
    </body>
</html>

